<template>
	<view class="page">
		<view class="navbar">
			<!-- 使用 v-if 来避免重复渲染两个按钮 -->
			<button v-if="currentView == 'unfinished'" @click="switchPage" data-type="finished">查看已完成订单</button>
		</view>
		<view class="order-container">
			<!-- 遍历completedOrders列表 -->
			<view class="order-card" v-for="(order, index) in orders" :key="order.orderId">
				<!-- 使用flex布局来实现图片和订单信息的并排展示 -->
				<view class="order-info" style="display: flex; align-items: center">
					<image v-if="index < imgsList.length" class="order-image" :src="imgsList[index]" mode="aspectFill" />
					<view class="order-details">
						<view class="row">
							<text class="info-title">
								订单号：
								<text class="showOrder">{{ order.orderId }}</text>
							</text>
							<text class="info-title">
								商品名：
								<text class="showOrder">{{ order.productName }}</text>
							</text>
							<text class="info-title">
								邮寄地址：
								<text class="showOrder">{{ order.address }}</text>
							</text>
						</view>
						<view style="display: flex">
							<button class="button" style="position: relative; left: 30px" size="mini" @click="() => showShipping(order.orderId)">查看物流</button>
							<button class="button" style="position: relative; left: 22px" size="mini" @click="() => showConfirmModal(order.orderId, index)">确认收货</button>
						</view>
					</view>
				</view>
			</view>
			<!-- 弹窗组件 -->
		</view>
		<view class="modal1" v-if="showModal">
			<text class="queding" style="margin-left: 0rpx; margin-bottom: 10rpx">确定已收到货物吗？</text>
			<view class="button-group">
				<button class="modal-button cancel" @click="hideModal">取消</button>
				<button class="modal-button confirm" @click="() => confirmReceipt()">确定</button>
			</view>
		</view>
		<view class="modal" v-if="showModal1">
			<view class="shipping-info" v-if="shippings">
				<text class="info-title">
					订单号：
					<text class="info-value">{{ shippings.orderId }}</text>
				</text>
				<text class="info-title">
					快递类型：
					<text class="info-value">{{ shippings.company }}</text>
				</text>
				<text class="info-title">
					物流编号：
					<text class="info-value">{{ shippings.trackingNumber }}</text>
				</text>
				<text class="info-title">
					发货时间：
					<text class="info-value">{{ shippings.shippedAt }}</text>
				</text>
				<text class="info-title">
					预计到达时间：
					<text class="info-value">{{ shippings.estimatedAt }}</text>
				</text>
				<view class="button-group">
					<button class="modal-button confirm" @click="hideModal1">确定</button>
				</view>
			</view>
			<view v-else>
				<text>暂无物流信息</text>
				<view class="button-group">
					<button class="modal-button confirm" @click="hideModal1">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			username:null,
			userId: null,
			index: null,
			imgsList: [],
			orders: [],
			showModal: false,
			showModal1: false,
			modalType: null,
			modalText: '',
			currentOrderId: null,
			currentView: 'unfinished', // 用于控制当前页面的视图
			shippings: {
				shippingId: null,
				orderId: null,
				company: null,
				trackingNumber: null,
				shippedAt: null,
				estimatedAt: null
			}
		};
	},
	onShow() {
		this.username = uni.getStorageSync('username');
		uni.request({
			method: 'GET',
			url: `http://localhost:8080/user/selectUserByUsername?username=${this.username}`, // 替换为实际的API地址
			success: (res) => {
				if (res.statusCode === 200) {
					uni.setStorageSync('userId', res.data.data.userId);
				} else {
					uni.showToast({
						title: '请求失败，状态码：' + res.statusCode,
						icon: 'none'
					});
				}
			},
			fail: (error) => {
				console.error('请求失败', error);
			}
		});
		this.userId = uni.getStorageSync('userId');
		this.fetchCartItems();
	},
	methods: {
		fetchCartItems() {
			console.log('开始');
			const username = uni.getStorageSync('username');
			console.log('用户名' + username);
			uni.request({
				url: 'http://localhost:8080/order/unfinishOrders', // 后端接口地址
				method: 'GET',
				data: {
					userId: this.userId // 使用 carProductId 作为查询库存的参数
				},
				// data:username,
				success: (res) => {
					if (res.data.data && res.data.data.length > 0) {
						console.log('这里' + res.data.data);
						this.orders = res.data.data;
					} else {
						this.orders = [];
					}
				},
				fail: (err) => {
					console.error(err);
				}
			});
			uni.request({
				url: 'http://localhost:8080/order/showUnfinishOrdersImg', // 后端接口地址
				method: 'GET',
				data: {
					userId: this.userId // 使用 carProductId 作为查询库存的参数
				},
				// data:username,
				success: (res) => {
					if (res.data.data && res.data.data.length > 0) {
						console.log('这里' + res.data.data);
						this.imgsList = res.data.data;
					} else {
						this.imgsList = [];
					}
				},
				fail: (err) => {
					console.error(err);
				}
			});
		},

		hideModal() {
			this.showModal = false;
		},
		hideModal1() {
			this.showModal1 = false;
		},
		showCancelModal(orderId) {
			this.currentOrderId = orderId;
			this.showModal = true;
			this.modalType = 'cancel';
		},
		//主页面确认收货
		showConfirmModal(orderId, index) {
			this.currentOrderId = orderId;
			this.index = index;
			this.showModal = true;
			confirmReceipt(index);
		},
		confirmAction() {
			this.hideModal();
		},
		// 查看物流的方法
		showShipping(orderId) {
			console.log(orderId);
			this.showModal1 = true;
			uni.request({
				url: `http://localhost:8080/shipping/showShippingById?orderId=${orderId}`, // 假设这是后端接口地址
				method: 'GET',
				success: (res) => {
					this.shippings = res.data.data;
				},
				fail: (err) => {
					console.error(err);
				}
			});
		},
		// 弹窗确定收货
		confirmReceipt(index) {
			console.log('确认收货的订单ID:', this.currentOrderId);
			uni.request({
				url: 'http://localhost:8080/order/updateComplishAt', // 假设这是后端接口地址
				method: 'GET',
				data: {
					orderId: this.currentOrderId // 将订单ID作为请求体传递
				},
				success: (res) => {
					console.log('确认收货响应: ', res.data);
					if (res.data.status === 200) {
						const index = this.orders.findIndex((order) => order.orderId === this.currentOrderId);
						if (index !== -1) {
							this.orders.splice(index, 1); // 删除订单
							uni.showToast({
								title: '确认收货成功',
								icon: 'success'
							});
						}
						this.imgsList.splice(index, 1);
					}
				},
				fail: (err) => {
					console.error(err);
				}
			});
			this.showModal = false;
		},
		switchPage() {
			uni.navigateTo({
				url: '/pages/orders/finished/finished' // 跳转到已完成订单页面的路由
			});
		}
	}
};
</script>

<style>
.page {
	background-color: #eceaea;
}

.row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 10rpx;
}

.order-container {
	width: 100%;
	flex-wrap: wrap;
	padding: 10px;
}

.order-card {
	width: 95%;
	/* 根据需要调整，使每行显示两个订单卡片 */
	margin-bottom: 10px;
	background-color: #fff;
	/* 卡片背景色 */
	border-radius: 8px;
	/* 圆角边框 */
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	/* 阴影效果 */
	overflow: hidden;
	/* 隐藏溢出内容 */
}

.order-image {
	width: 100px;
	/* 图片宽度 */
	height: 100px;
	/* 图片高度 */
	margin-left: 20px;
	margin-top: 5rpx;
	/* 图片与订单信息之间的间距 */
}

.order-details {
	padding: 20px;
	/* 内边距 */
}

/* 按钮组样式 */
.button-group {
	display: flex;
	margin-left: 120px;
	margin-top: 10px;
	/* 按钮与订单信息的间距 */
	margin-bottom: 10px;
}

/* 按钮样式 */
.cancel-btn,
.confirm-btn {
	width: 40%;
	/* 按钮宽度 */
	padding: 3px;
	/* 按钮内边距 */
	font-size: 12px;
	/* 按钮文字大小 */
	border-radius: 20px;
}

.cancel-btn {
	background-color: #fff;
	border: 1px solid rgb(212, 209, 209);
}

.confirm-btn {
	background-color: rgb(233, 100, 140);
	margin-left: 0px;
}

/* 遮罩层样式 */
.mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	/* 半透明背景 */
	z-index: 1000;
	/* 遮罩层在页面最上层 */
}

.button {
	background-color: rgb(252, 252, 255);
	font-size: 15px;
	color: #f3841c;
	/* margin-left: 300px; */
	margin-top: 0px;
	margin-bottom: 10px;
	border: 1px solid rgb(250, 153, 7);
	border-radius: 20px;
}

/* 弹窗样式 */
.modal {
	position: fixed;
	flex-direction: column;
	/* 垂直排列子元素 */
	align-items: center;
	/* 水平居中对齐 */
	justify-content: center;
	/* 水平居中对齐 */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1001;
	/* 弹窗内容在遮罩层之上 */
	background-color: #ffffff;
	/* 弹窗背景色 */
	border-radius: 10px;
	padding: 20px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	display: flex;
	width: 220px;
	height: auto;
	/*高度根据内容自动调整*/
	align-items: center;
	justify-content: center;
}
.modal1 {
	position: fixed;
	flex-direction: column;
	/* 垂直排列子元素 */
	align-items: center;
	/* 水平居中对齐 */
	justify-content: center;
	/* 水平居中对齐 */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1001;
	/* 弹窗内容在遮罩层之上 */
	background-color: #ffffff;
	/* 弹窗背景色 */
	border-radius: 10px;
	padding: 20px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	display: flex;
	width: 210px;
	height: 70px;
	/*高度根据内容自动调整*/
	align-items: center;
	justify-content: center;
}

/* 弹窗按钮组样式 */
.button-group {
	display: flex;
	margin-top: 5px;
	/* 按钮与文本的间距 */
}

/* 弹窗按钮公共样式 */
.modal-button {
	border-radius: 5px;
	/* 按钮边框圆角 */
	margin: 5px;
	/* 按钮外边距，控制按钮之间的距离 */
	padding: 0px 10px;
	/* 按钮内边距，控制文字与按钮边缘的距离 */
	font-size: 16px;
	/* 按钮文字大小 */
	width: 55px;
	height: 35px;
}

/* 取消按钮样式 */
.modal-button.cancel {
	background-color: #ffffff;
	/* 背景颜色 */
	color: #000000;
	/* 文字颜色 */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	/* 轻微的阴影 */
}

/* 确定按钮样式 */
.modal-button.confirm {
	background-color: rgb(233, 100, 140);
	/* 背景颜色 */
	color: #ffffff;
	/* 文字颜色 */
}

/* 物流信息样式 */
.shipping-info {
	display: flex;
	flex-direction: column;
	padding: 20px;
	background-color: #ffffff;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.info-title {
	font-weight: bold;
	color: #333333;
	margin-bottom: 5px;
}

.info-value {
	color: #666666;
	margin-bottom: 15px;
}
</style>
